<template>
	<view class="upload-wrapper" :style="{padding:boxPadding}">
		<!-- 上传按钮 -->
		<view class="upload-btn" :style="buttonStyle" @click="onChooseFile">
			<view class="bt-item">
			<image :src="icon" class="upload-icon" :style="{ width: imgSize, height: imgSize }" />
			<text class="upload-text">{{ text }}</text>
			</view>
		</view>

		<!-- 上传后文件名 -->
		<view v-if="fileName" class="file-name" :style="fileNameStyle">
			{{ fileName }}
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		
		
	} from '@dcloudio/uni-app'
	import {
		videoUpload
	} from '@/api'
	/**
	 * props 参数
	 */
	const props = defineProps({
		boxPadding: {
			type: String,
			default: '30upx'
		}, // 按钮宽度
		buttonStyle: {
			type: Object,
			default: () => ({})
		}, // 按钮样式
		imgSize: {
			type: String,
			default: '40rpx'
		}, // 图片大小
		fileNameStyle: {
			type: Object,
			default: () => ({})
		}, // 文件名样式
		icon: {
			type: String,
			default: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0828/92002202508281539311798.png'
		}, // 按钮图片
		text: {
			type: String,
			default: '上传文件'
		} // 按钮文字
	})

	/**
	 * 事件
	 */
	const emit = defineEmits(['success', 'fail'])

	const fileName = ref('')

	/**
	 * 选择文件并上传
	 */
	const onChooseFile = () => {
	  uni.chooseImage({
	    count: 1,
	    // 可选：type: 'all' // all | image | video | audio
	    success: async (res) => {
	      const file = res.tempFiles[0]
	      fileName.value = file.name   // ✅ 原始文件名，支持中文
	
	      try {
	        const { data } = await videoUpload({
	          name: 'file',
	          filePath: file.path
	        })
			
			if(data.originalName){
				fileName.value = data.originalName
			}
			
			
	        emit('success', data) // 通知父组件返回接口结果
	      } catch (err) {
	        uni.showToast({ title: '上传失败', icon: 'none' })
	        fileName.value = ''
	        emit('fail', err)
	      }
	    }
	  })
	}
</script>

<style scoped>
	.upload-wrapper {
	
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.upload-btn {
		width: 100%;
		box-sizing: border-box;
		display: flex;
	/* 	align-items: center; */
		align-content: center;
		justify-content: center;
	}

	.upload-icon {
		margin-bottom: 10rpx;
	}

	.upload-text {
		font-size: 28rpx;
		margin-left: 20rpx;
	}
	
	.bt-item{
		display: flex;
		/* align-items: center; */
		align-content: center;
	}

	.file-name {
		margin-top: 10rpx;
		text-align: center;
	}
</style>